<template>
	<div class="box">
		<!-- 我的 页面 -->
		<header>
			<div class="top">
				<div class="logo">
					<img :src="require('../assets/huo_me/5.jpg')" />
				</div>
				<div class="username">王晓理</div>
				<div class="rightlink">
					<img :src="require('../assets/huo_me/go2.png')" alt="" />
				</div>
			</div>
			<div class="bottom">
				<div class="con">
					<a>我的课程</a>
					<a>缓存视频</a>
				</div>
			</div>
		</header>
		<section>
			<article class="component1">
				<div class="img">
					<img :src="require('../assets/huo_me/6.jpg')" alt="" />
				</div>
				<div class="info">
					<p>数据同步</p>
					<p>点击立即同步，上传记录</p>
				</div>
				<div class="btn"><a>立即同步</a></div>
			</article>
			<article class="component2">
				<div class="info1">
					<span>1天</span>
					<span>坚持天数</span>
				</div>
				<div class="info1">
					<span>3章</span>
					<span>学习章节</span>
				</div>
				<div class="info1">
					<span>80%</span>
					<span>练习正确率</span>
				</div>
			</article>
			<article class="component3">
				<div
					@click="targetPage(componentsname[i])"
					v-for="(v, i) in arr"
					:key="v.src + i"
				>
					<img :src="require('../assets/huo_me/' + v.src)" alt="" />
					<div>{{ v.title }}</div>
				</div>
			</article>
		</section>
	</div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapMutations } = createNamespacedHelpers('huo_me/')
export default {
	components: {},
	computed: {
		...mapState(['name']),
	},
	data() {
		return {
			arr: [
				{ title: '开通课程', src: 'icon.png' },
				{ title: '意见反馈', src: 'icon1.png' },
				{ title: '排行榜', src: 'icon2.png' },
				{ title: '邀请好友', src: 'icon3.png' },
				{ title: '设置', src: 'icon5.png' },
				{ title: '常见问题', src: 'icon6.png' },
				{ title: '领取资料', src: 'icon4.png' },
			],
			componentsname: [
				{ link: 'Openclass', component: '开通课程' },
				{ link: 'Feedback', component: '意见反馈' },
				{ link: 'Ranking', component: '排行榜' },
				{ link: 'Invite', component: '邀请好友' },
				{ link: 'Set', component: '设置' },
				{ link: 'FAQ', component: '常见问题' },
				{ link: 'Receive', component: '领取资料' },
			],
		}
	},
	methods: {
		...mapMutations(['setName']),
		targetPage(v) {
			this.setName(v.component)
			this.$router.push(`/${v.link}`)
		},
	},
}
</script>

<style scoped lang='scss'>
.box {
	width: 100%;
}
header {
	width: 100%;
	height: 204px;
	background: url('../assets/huo_me/mybg.jpg') 100% no-repeat;
}
.top {
	display: flex;
	padding: 40px 0 30px;
	height: 76px;
	width: 100%;
	line-height: 76px;
	.logo {
		margin: 0 10px 0 20px;
		img {
			border: 3px solid white;
			width: 70px;
			height: 70px;
			border-radius: 50%;
		}
	}
	.username {
		width: 231px;
		text-align: left;
		color: white;
	}
	.rightlink {
		img {
			margin-top: 26px;
			height: 24px;
		}
	}
}
.bottom {
	width: 100%;
	.con {
		width: 305px;
		height: 38px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		a {
			display: block;
			width: 124px;
			height: 38px;
			box-sizing: border-box;
			border: 1px solid white;
			border-radius: 19px;
			line-height: 38px;
			color: white;
			text-align: center;
		}
	}
}
article {
	width: 345px;
	padding: 10px 0;
	display: flex;
	flex-wrap: wrap;
	margin: 13px auto;
	box-shadow: #eee 0px 0px 10px 2px;
	&.component1 {
		.img {
			width: 50px;
			height: 50px;
			margin: 0 10px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.info {
			width: 183px;
			height: 50px;
			p {
				height: 24px;
				line-height: 24px;
				margin: 0;
				text-align: left;
				& + p {
					font-size: 12px;
					color: #333;
				}
			}
		}
		.btn {
			width: 82px;
			height: 50px;
			a {
				display: block;
				height: 65px;
				height: 26px;
				border: 1px solid #3f81f1;
				line-height: 26px;
				color: #3f81f1;
				text-align: center;
				margin: 11px 0 0;
				border-radius: 5px;
				font-size: 12px;
			}
		}
	}
	&.component2 {
		div {
			width: 33.33%;
			height: 48px;
			span {
				display: block;
				height: 24px;
				line-height: 24px;
				text-align: center;
				& + span {
					color: #666;
					font-size: 13px;
				}
			}
		}
	}
	&.component3 {
		& > div {
			width: 25%;
			height: 53px;
			padding: 5px 0;
			text-align: center;
			img {
				width: 28px;
				height: 28px;
			}
			div {
				height: 25px;
				line-height: 25px;
				color: #333;
				font-size: 12px;
			}
		}
	}
}
</style>